﻿@page "/stock-chart/stock-events"
@using Syncfusion.Blazor
@using Syncfusion.Blazor.Charts
@using Newtonsoft.Json
@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;
@using ThemeHelper

<ActionDescription>
    <p>In this example, you can see how to render and configure the Stock Chart. <code>SplineSeries</code> is used to represent selected data value.</p>
</ActionDescription>
<SampleDescription>
    <p> This sample visualizes the Stock Chart </p>
</SampleDescription>



@if (DataSource == null)
{
    <div class="stockchartloader">
    </div>
}
else
{
    <div class="@loadClass">
    </div>
    <div class="@loadDiv">
        <SfStockChart Title="AAPL Stock Price" IndicatorType="@Indicators" Theme="@theme" TrendlineType="@TrendLines" SeriesType="@SeriesValue">
            <StockChartEvents OnLoaded="@ChartLoaded"></StockChartEvents>
            <StockChartPrimaryXAxis>
                <StockChartAxisMajorGridLines Width="0"></StockChartAxisMajorGridLines>
                <StockChartAxisCrosshairTooltip Enable="true"></StockChartAxisCrosshairTooltip>
            </StockChartPrimaryXAxis>
            <StockChartPrimaryYAxis>
                <StockChartAxisLineStyle Width="0"></StockChartAxisLineStyle>
                <StockChartAxisMajorTickLines Width="0"></StockChartAxisMajorTickLines>
                <StockChartAxisCrosshairTooltip Enable="true"></StockChartAxisCrosshairTooltip>
            </StockChartPrimaryYAxis>
            <StockChartStockEvents>
                <StockChartStockEvent Date="new DateTime(2011, 03, 01)" Text="Q2" Description="2012 Quarter2" Type="FlagType.Flag" Background="#6c6d6d">
                    <StockChartStockEventsBorder Color="#6c6d6d"></StockChartStockEventsBorder>
                </StockChartStockEvent>
                <StockChartStockEvent Date="new DateTime(2012, 03, 20)" Text="Open" Description="Markets opened" Background="#f48a21">
                    <StockChartStockEventsBorder Color="#f48a21"></StockChartStockEventsBorder>
                    <StockChartStockEventsTextStyle Color="white"></StockChartStockEventsTextStyle>
                </StockChartStockEvent>
                <StockChartStockEvent Date="new DateTime(2012, 06, 01)" Text="Q3" Description="2013 Quarter3" Type="FlagType.Flag" Background="#6c6d6d">
                    <StockChartStockEventsTextStyle Color="white"></StockChartStockEventsTextStyle>
                    <StockChartStockEventsBorder Color="#6c6d6d"></StockChartStockEventsBorder>
                </StockChartStockEvent>
                <StockChartStockEvent Date="new DateTime(2012, 09, 01)" Text="Q4" Description="2013 Quarter4" Type="FlagType.Flag" Background="#6c6d6d">
                    <StockChartStockEventsBorder Color="#6c6d6d"></StockChartStockEventsBorder>
                    <StockChartStockEventsTextStyle Color="white"></StockChartStockEventsTextStyle>
                </StockChartStockEvent>
                <StockChartStockEvent Date="new DateTime(2013, 07, 30)" Text="G" Description="Google Stock" Background="#f48a21">
                    <StockChartStockEventsBorder Color="#f48a21"></StockChartStockEventsBorder>
                    <StockChartStockEventsTextStyle Color="white"></StockChartStockEventsTextStyle>
                </StockChartStockEvent>
                <StockChartStockEvent Date="new DateTime(2013, 10, 01)" Text="Y" Description="Yahoo Stock" Type="FlagType.Square" Background="#841391">
                    <StockChartStockEventsBorder Color="#841391"></StockChartStockEventsBorder>
                    <StockChartStockEventsTextStyle Color="white"></StockChartStockEventsTextStyle>
                </StockChartStockEvent>
                <StockChartStockEvent Date="new DateTime(2013, 12, 04)" Text="Y2" Description="Year 2013" Type="FlagType.Pin" Background="#6322e0" ShowOnSeries="false">
                    <StockChartStockEventsBorder Color="#6322e0"></StockChartStockEventsBorder>
                    <StockChartStockEventsTextStyle Color="white"></StockChartStockEventsTextStyle>
                </StockChartStockEvent>
                <StockChartStockEvent Date="new DateTime(2014, 03, 01)" Text="Q2" Description="2013 Quarter2" Type="FlagType.Flag" Background="#6c6d6d">
                    <StockChartStockEventsBorder Color="#6c6d6d"></StockChartStockEventsBorder>
                    <StockChartStockEventsTextStyle Color="white"></StockChartStockEventsTextStyle>
                </StockChartStockEvent>
                <StockChartStockEvent Date="new DateTime(2014, 03, 20)" Text="Q2" Description="Surge in Stocks" Type="FlagType.ArrowUp" Background="#3ab0f9">
                    <StockChartStockEventsBorder Color="#3ab0f9"></StockChartStockEventsBorder>
                    <StockChartStockEventsTextStyle Color="white"></StockChartStockEventsTextStyle>
                </StockChartStockEvent>
                <StockChartStockEvent Date="new DateTime(2014, 06, 01)" Text="Q3" Description="2013 Quarter3" Type="FlagType.Flag" Background="#6c6d6d">
                    <StockChartStockEventsBorder Color="#6c6d6d"></StockChartStockEventsBorder>
                    <StockChartStockEventsTextStyle Color="white"></StockChartStockEventsTextStyle>
                </StockChartStockEvent>
                <StockChartStockEvent Date="new DateTime(2014, 09, 01)" Text="Q4" Description="2013 Quarter4" Type="FlagType.Flag" Background="#6c6d6d">
                    <StockChartStockEventsBorder Color="#6c6d6d"></StockChartStockEventsBorder>
                    <StockChartStockEventsTextStyle Color="white"></StockChartStockEventsTextStyle>
                </StockChartStockEvent>
                <StockChartStockEvent Date="new DateTime(2014, 12, 03)" Text="Y3" Description="Year 2014" Type="FlagType.Pin" Background="#6322e0" ShowOnSeries="false">
                    <StockChartStockEventsBorder Color="#6322e0"></StockChartStockEventsBorder>
                    <StockChartStockEventsTextStyle Color="white"></StockChartStockEventsTextStyle>
                </StockChartStockEvent>
                <StockChartStockEvent Date="new DateTime(2016, 03, 01)" Text="Q2" Description="2014 Quarter2" Type="FlagType.Flag" Background="#6c6d6d">
                    <StockChartStockEventsBorder Color="#6c6d6d"></StockChartStockEventsBorder>
                    <StockChartStockEventsTextStyle Color="white"></StockChartStockEventsTextStyle>
                </StockChartStockEvent>
                <StockChartStockEvent Date="new DateTime(2016, 06, 01)" Text="Q3" Description="2014 Quarter3" Background="#f48a21">
                    <StockChartStockEventsBorder Color="#f48a21"></StockChartStockEventsBorder>
                    <StockChartStockEventsTextStyle Color="white"></StockChartStockEventsTextStyle>
                </StockChartStockEvent>
                <StockChartStockEvent Date="new DateTime(2016, 09, 01)" Text="Q4" Description="2014 Quarter4" Type="FlagType.Flag" Background="#f48a21">
                    <StockChartStockEventsBorder Color="#f48a21"></StockChartStockEventsBorder>
                    <StockChartStockEventsTextStyle Color="white"></StockChartStockEventsTextStyle>
                </StockChartStockEvent>
                <StockChartStockEvent Date="new DateTime(2016, 12, 01)" Text="Y4" Description="Year 2015" Type="FlagType.Pin" ShowOnSeries="false" Background="#6322e0">
                    <StockChartStockEventsBorder Color="#6322e0"></StockChartStockEventsBorder>
                    <StockChartStockEventsTextStyle Color="white"></StockChartStockEventsTextStyle>
                </StockChartStockEvent>
                <StockChartStockEvent Date="new DateTime(2016, 02, 02)" Text="End" Description="Markets closed" Type="FlagType.ArrowDown" Background="#3ab0f9">
                    <StockChartStockEventsBorder Color="#3ab0f9"></StockChartStockEventsBorder>
                    <StockChartStockEventsTextStyle Color="white"></StockChartStockEventsTextStyle>
                </StockChartStockEvent>
                <StockChartStockEvent Date="new DateTime(2017, 01, 07)" Text="A" Description="Amazon Stock" Background="#f48a21">
                    <StockChartStockEventsBorder Color="#f48a21"></StockChartStockEventsBorder>
                    <StockChartStockEventsTextStyle Color="white"></StockChartStockEventsTextStyle>
                </StockChartStockEvent>
                <StockChartStockEvent Date="new DateTime(2017, 01, 02)" Text="Q1" Description="AAPL Stock" Type="FlagType.Text" Background="#dd3c9f">
                    <StockChartStockEventsBorder Color="#dd3c9f"></StockChartStockEventsBorder>
                    <StockChartStockEventsTextStyle Color="white"></StockChartStockEventsTextStyle>
                </StockChartStockEvent>
                <StockChartStockEvent Date="new DateTime(2017, 02, 12)" Text="Close" Description="Markets closed" Background="#f48a21">
                    <StockChartStockEventsBorder Color="#f48a21"></StockChartStockEventsBorder>
                    <StockChartStockEventsTextStyle Color="white"></StockChartStockEventsTextStyle>
                </StockChartStockEvent>
            </StockChartStockEvents>
            <StockChartCrosshairSettings Enable="true"></StockChartCrosshairSettings>
            <StockChartSeriesCollection>
                <StockChartSeries DataSource="@DataSource" Type="ChartSeriesType.Spline"></StockChartSeries>
            </StockChartSeriesCollection>
            <StockChartChartArea>
                <StockChartChartAreaBorder Width="0"></StockChartChartAreaBorder>
            </StockChartChartArea>
        </SfStockChart>
    </div>
    <style>
        .stockchartloader {
            border: 6px solid #f3f3f3;
            border-top: 6px solid #7a0fff;
            width: 40px;
            height: 40px;
            position: absolute;
            top: 46%;
            left: 46%;
            border-radius: 50%;
            -webkit-animation: loader 2s linear infinite;
            animation: loader 2s linear infinite;
        }
        .stockchartdiv {
            visibility: hidden;
        }
    </style>
}

@code{
    
    List<TechnicalIndicators> Indicators = new List<TechnicalIndicators>() { };
    List<TrendlineTypes> TrendLines = new List<TrendlineTypes>() { };
    public List<ChartSeriesType> SeriesValue = new List<ChartSeriesType>();
    private ChartData[] DataSource;

    protected override async Task OnInitializedAsync()
    {
        BeforeRender();
        await Task.Run(() =>
        {
            DataSource = JsonConvert.DeserializeObject<ChartData[]>(System.IO.File.ReadAllText("./wwwroot/data/stock-chart/chart-data.json"));
        });
    }

    public class ChartData
    {
        public DateTime date { get; set; }
        public double open { get; set; }
        public double low { get; set; }
        public double close { get; set; }
        public double high { get; set; }
        public double volume { get; set; }
    }

    string loadClass = "stockchartloader";
    string loadDiv = "stockchartdiv";
    void ChartLoaded(StockChartEventArgs args)
    {
        loadClass = "";
        loadDiv = "";
        StateHasChanged();
    }

    Theme theme = Theme.Bootstrap4;
    void BeforeRender()
    {
        theme = ThemeHelper.GetCurrentTheme(NavigationManager.Uri);
    }
}